<#-- 表单样式宏 -->
<#include "/base/common.ftl"/>
<@bootstrap.head >
	<script type="text/javascript" src="<@spring.url "/resources/js/jtopo-0.4.8-min.js" />"></script>
</@bootstrap.head>
<@bootstrap.body>
  <!-- 画布 -->
  <canvas id="jtopo" width="1200px" height="1000px" style="background-color:#eeeeee;">当前浏览器不支持Canvas,请更换浏览器</canvas>
</@bootstrap.body>
<script>
var scheduleName = "${pmHzbatSchedule.scheduleName}" ;
var colorEnum = {
	0:"22,124,255",
	1:"80,165,26",
	2:"140,140,140",
	4:"254,73,2"
};
var jtopo = document.getElementById("jtopo");
var stage = new JTopo.Stage(jtopo);
var scene = new JTopo.Scene(stage);
$(document).ready(function(){
	//加载数据
	load();
});
    
   //数据加载
   function load(){
    	$.ajax({
			url:"<@spring.url "/pmHzbatBatchesInfo/getScheduleBatches" />",
			data:{scheduleName:scheduleName},
			type:"post",
			success:function(text){
			   if(text.success){
			   		drawing(text.data);
			   }
			}
		});
    
    }
    
    //绘制流程图
    function drawing(data){
    	var beginNode = addNode(400,20,"开始");
    	var endNode = addNode(400,550,"结束");
    	if(!data || data.length==0){
    		return false ;
    	}
        for(var i=0;i<data.length;i++){
        	var batches = data[i] ;
        	var fromBatch ;
        	for(var j=0 ; j < batches.length ; j++){
        		var bat = batches[j];
        		if(!window[renameBatch(bat.batchName)]){
        			window[renameBatch(bat.batchName)] = addNode(150*(i+1),80*(j+1),bat.batchName,bat);
        		}
        		var thisBatch = window[renameBatch(bat.batchName)] ;
        		//首节点,则与开始节点连线
        		if( j == 0 ){ 
        			addLink(beginNode,thisBatch,""); 
        		}
				//末节点,则与结束节点连线
				if( j == batches.length - 1 ){ 
        		    addLink(thisBatch,endNode,"");   
        		}
        		//不是首节点
        		if( j > 0 ){
        		    addLink(fromBatch,thisBatch,""); //上一节点连线到本节点
        		}
        		fromBatch = thisBatch ;          //将本节点置为下一节点的上一节点
        	}
        }
    }
 
      //创建节点元素  
	  function addNode(_x,_y,_text,_data){
			if(_data){
				var node = new JTopo.Node(_text? _text : _data.batchEsc);
			}else{
				var node = new JTopo.Node(_text? _text : "NULL");
			}
			node.textPosition = "Middle_Center" ;
			node.setLocation(_x,_y);
			node.setSize(80,40);
			node.textOffsetY = -4 ;
			node.borderRadius = 5 ;	
			if(_data){
				node.fillColor = colorEnum[_data.progress];
			}
			/*
			node._data = _data;
			node.dbclick(function(e){
				if(node.text == "开始" || node.text == "结束"){
					return false ;
				}
				//填充数据
				$("#dialogForm").autofill(node._data);
				//打开模态窗
				$("#dialog-form").dialog({
					modal:true,  //高亮显示
					//按钮
					buttons:{ 
						"确定":function(){
							var _this = $(this);
							var $form = $("#dialogForm") ;
							$form.ajaxSubmit(function(text){
								if(text.success){
									alert("SUCCESS");
									//更新node._data;
									node._data = C._serializeArrayToJson($form.serializeArray());
									//关闭窗口
									_this.dialog('close');
								}else{
									C._showErrorMessage($form,text.error);
								}							
							});
						},
						"取消":function(){
							$(this).dialog('close');
						}
					},
					show:{  //显示方式
						effect:"blind",
						duration:500 
					},
					width:700
				});
			});
			*/
			scene.add(node);
			return node ;
	  }

      //给节点之间连线
      function addLink(_node1,_node2,_text){
	  		var link = new JTopo.Link(_node1,_node2,_text,{});
			link.lineWidth = 8 ;
			link.arrowsRadius = 10 ;
			link.dbclick(function(e){
			    //link.nodeZ = batche4;
				//console.log(link);
			});		 
			scene.add(link);
			return link ;
	  }
	  
	  function renameBatch(name){
	  	return "___" + name + "___";
	  }

</script>